<template>
	<div class="map">
		<van-swipe :autoplay="3000">
			<van-swipe-item v-for="(image, index) in images" :key="index">
				<img style="width: 100%;height: 50vw;" :src="image" />
			</van-swipe-item>
		</van-swipe>
		<van-search 
			v-model="gcb_name" 
			placeholder="请输入使用人姓名" 
			@search="onSearch"
		/>
		<van-search 
			v-model="c_nam" 
			placeholder="请输入认购人姓名" 
			@search="onSearch"
		/>
		<van-search 
			v-model="gm_ex6" 
			placeholder="请输入墓位编号 例: 中南区1-1" 
			@search="onSearch"
		/>
		<!-- <van-search 
			v-model="c_ex13" 
			:show-action="false"
			placeholder="请输入家属身份证" 
			@search="onSearch"
		>
			<template #action>
				<div @click="onSearch">搜索纪念馆</div>
			</template>
		</van-search> -->
		<van-button type="primary" block size="small" @click="onSearch">搜索纪念馆</van-button>

		
		
		<PullRefreshList v-model:refreshing="refreshing" v-model:loading="loading" v-model:finished="finished" v-model:list="list" @load="onLoad">
			<div v-for="(item,index) in list" :key="index" class="content">
				<div class="img">
					<img :src="item.gm_ex27" >
					<!-- <img :src="item.img" > -->
					<!-- <div v-html="item.imgurl"></div> -->
				</div>
				<div class="font">
					<div>{{item.address}}</div>
					<div>使用人姓名：{{ item.gcb_name }}</div>
					<div>认购人姓名：{{ getDesensitizeNameStr(item.c_nam) }}</div>
					<div>身份证：{{ getDesensitizeIdCardStr(item.c_ex13) }}</div>
					<div>墓位编号：{{ item.gm_ex6 }}</div>
					<div>
						<van-button type="primary" size="small" style="margin-right: 1vw" @click.stop="$router.push(`/cloudSacrificePersonalHall?th_id=${item.gm_id}`)">进入纪念馆</van-button>
						<van-button type="primary" size="small" @click.stop="showP(item)">云纪念二维码</van-button>
					</div>
				</div>
			</div>
		</PullRefreshList>
		<van-popup v-model:show="showPopup1" :style="{ padding: '5vw' }">
			<div v-html="imgUrl"></div>
		</van-popup>
	</div>
</template>

<script lang="ts" setup>
	import { ref, reactive, markRaw } from 'vue'
	import type { Ref, Raw } from 'vue'
	import { showDialog, showLoadingToast, closeToast, showFailToast } from 'vant'
    import { useRouter, useRoute } from 'vue-router'
    import { useStore } from '@/store'
    import FixedButton from '@/components/FixedButton.vue'

	import PullRefreshList from '@/components/PullRefreshList.vue'
    import { WSJSYTJApi } from '@/apis'
	import { getDesensitizeNameStr, getDesensitizeIdCardStr } from '@/utils/utils'

	const route = useRoute()
	const store = useStore()
	console.log(store.gcb_name)
	console.log(route.path)
	const images: Raw<string[]> = markRaw([new URL('@/assets/banner/gmjs_bg9.png', import.meta.url).href])
	const list: Ref<Array<any>> = ref([])
	const loading: Ref<boolean> = ref(false)
	const finished: Ref<boolean> = ref(false)
	const showPopup1: Ref<boolean> = ref(false)
	const refreshing: Ref<boolean> = ref(true)
	const gcb_name: Ref<string> = ref(store.gcb_name)
	const gm_ex6: Ref<string> = ref(store.gm_ex6)
	const c_nam: Ref<string> = ref(store.c_nam)
	const c_ex13: Ref<string> = ref('')
	const imgUrl: Ref<string> = ref('')
	
	const onSearch = async () => {
		if (!gcb_name.value && !c_ex13.value && !gm_ex6.value && !c_nam.value) {
			showDialog({
				title: '提示',
				message: '请输入使用人姓名,认购人姓名或者墓位编号！'
			})
		} else {
			store.gcb_name = gcb_name.value
			store.gm_ex6 = gm_ex6.value
			store.c_nam = c_nam.value
			showLoadingToast({
				message: '加载中...',
				forbidClick: true,
				duration: 0
			})
			let val = await WSJSYTJApi({
				gcb_name: gcb_name.value,
				c_nam: c_nam.value,
				gm_ex6: gm_ex6.value,
				c_ex13: c_ex13.value,
			})
			closeToast()
			list.value = val
			if (list.value.length == 0) {
				showFailToast('暂无数据！')
			}
			console.log(list.value)
		}
	}

	const onLoad = async (callback) => {
		console.log(callback)
		// if (refreshing.value) {
		// 	list.value = [];
		// 	refreshing.value = false;
		// }
		if (gcb_name.value || c_ex13.value || gm_ex6.value || c_nam.value) {
			let val = await WSJSYTJApi({
				c_ex13: c_ex13.value,
				c_nam: c_nam.value,
				gm_ex6: gm_ex6.value,
				gcb_name: gcb_name.value,
			})
			list.value.push(...val)
		}
		
        callback(true)
	}
	const showP = (val) => {
		showPopup1.value = true
		imgUrl.value = val.imgurl
	}
	
    
</script>

<style lang="scss" scoped>
	.map{
		width: 100vw;
		height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
	}
    :deep(.van-pull-refresh) {
        overflow: scroll;
        flex: 1;
    }
	.content{
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 40vw;
	}
	.content > .img{
		width: 30vw;
		height: 30vw;
	}
	.content > .img img{
		width: 100%;
		height: 100%;
	}
	.content > .font{
		width: 60vw;
		// height: 38vw;
		height: 34vw;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.content > .font > div{
		overflow:hidden;
		/* white-space: nowrap;
		text-overflow: ellipsis; */
		color: #212121;
        text-align: left;
	}
	.content > .font > div:first-child{
		font-weight: bold;
		color: #181818;
	}
	
</style>
